import React, { useState, useEffect } from 'react';
// import { SearchOutline, DownFill } from 'antd-mobile-icons';
// import { useSearchParams, useNavigate } from "react-router-dom";
import './mine.css'
export default function Mine() {
   const data = [
      
      {
         "type": "zh", "_type": "a", "seaArray": [
            { "name": "综合排序", "value": 0 },
            { "name": "销量最高", "value": 1 },
            { "name": "人气最旺", "value": 2 },
            { "name": "最新上架", "value": 3 },
            { "name": "最近更新", "value": 4 },
         ]
      },
      {
         "type": "pd", "_type": "b", "seaArray": [
            { "name": "全部", "value": 0 },
            { "name": "男生", "value": 1 },
            { "name": "女生", "value": 2 },
            { "name": "出版", "value": 3 }
         ]
      },
      {
         "type": "wj", "_type": "c", "seaArray": [
            { "name": "全部", "value": 0 },
            { "name": "完结", "value": 1 },
            { "name": "连载", "value": 2 },
         ]
      },
      {
         "type": "pr", "_type": "c", "seaArray": [
            { "name": "全部", "value": 0 },
            { "name": "免费", "value": 1 },
            { "name": "包月", "value": 2 },
            { "name": "收费", "value": 3 },
         ]
      },
      {
         "type": "num", "_type": "c", "seaArray": [
            { "name": "30万字以下", "value": 0 },
            { "name": "30-50万字", "value": 1 },
            { "name": "50-100万字", "value": 2 },
            { "name": "100万字以上", "value": 3 },
         ]
      },
      {
         "type": "tt", "isTop": true, "seaArray": [
            { "name": "综合排序", "value": 0, "state": "a" },
            { "name": "全部频道", "value": 1, "state": "b" },
            { "name": "筛选", "value": 2, "state": "c" },
         ]
      },

   ]
   const [tep, setTep] = useState(data);
   const [arr, setArr] = useState([]);
   // nav 
   const [type, setType] = useState("")
   const [txt, setTxt] = useState("")

   useEffect(() => {
      console.log('tep', tep);
      if (tep.length) {
         let o = {};
         tep.forEach((k) => {
            o[k.type] = k.seaArray[0].value
         })
         setArr(o)
      }
   }, []);
   // 渲染二级列表
   let tempFun = (k, t, g) => {
      console.log(k, t, [data[t].type]);
      setType(g)
      setArr({ ...arr, [data[t].type]: k })
   }

   let tempFuns = (k,j)=>{
      console.log('----',k,j,[data[j].type]);
      setTxt(k)
   }

   return <div className="mine_box">
      {/* nav */}
      <p>测试 </p>
      {/*  */}
      {/* <div className="success_list">
         {tep.filter((o) => o.isTop).map((item, index) => (
            // console.log(item,index)
            <div>
               {item.seaArray.map((e, i) => (
                  <div className="se_one"
                     data-val="wccccccc"
                     onClick={() => tempFun(e.value, index, e.state)}
                  // onClick={() => setArr({...arr,[tep[i].type]:e.value})}
                  >
                     第一次高亮，value值
                     <span className={`title  ${arr.tt === e.value ? 't_active' : ''}`}>{e.name} {e.state}</span>
                     <span className={`arrow ${arr.tt === e.value ? 'a_active' : ''}`}><DownFill /></span>
                  </div>
               ))}
            </div>
         ))}
      </div> */}
      {/* 隐藏 */}
      {/* <div className="mask_list">
         {tep.filter((o) => !o.isTop).map((item, index) => (
            //  console.log('item',type,item.type)
            <div className="list_content">
               {item._type === type ? item.seaArray.map((e, i) => (
                  // console.log(e)
                  <p className="txt"
                  style={{color:(e.name === txt ? "#f00":"")}}
                     onClick={() => tempFuns(e.name,index)}
                  >{e.name}</p>
               )) : null}
            </div>
         ))}
      </div> */}
   </div>
}